<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .one{
            background-color: red;
        }
    </style>
</head>
<body>
    
    <div id="app">
        
        <!-- <ul>
            <li :class="{one:index == 0}" @click="selectFun(0)">1111</li>
            <li :class="{one:index == 1}" @click="selectFun(1)">2222</li>
            <li :class="{one:index == 2}" @click="selectFun(2)">3333</li>
            <li :class="{one:index == 3}" @click="selectFun(3)">4444</li>
            <li :class="{one:index == 4}" @click="selectFun(4)">5555</li>
        </ul> -->
        <!-- 动态绑定calss -->
        <!-- <ul>
            <li v-for="(item,ind) in arr" :class="{one:index == ind}" :key="index" @click="selectFun(ind)">{{item}}</li>
        </ul> -->

        <!-- 动态绑定style -->
        <!-- <ul>
            <li v-for="(item,ind) in arr" :style="{backgroundColor:(index == ind?'red':'')}" :key="index" @click="selectFun(ind)">{{item}}</li>
        </ul> -->
    </div>
   <script>
    
       let vm = new Vue({
        // 数据层
        el:"#app", //选择器
        data:{  //存放数据 存放变量
           index:null,
           arr:["11111",'222222','333333','4444','55555']
        },
        methods:{ //用来定义方法的地方
            selectFun(i){
                this.index = i;
            }
        }
       })



   </script>



</body>
</html>